<template>
  <page-frame>
    <div class="roomArrangement-container">
      <div class="toptitle">
        <div class="left">房间管理</div>
        <div class="right">
          <div class="btns">
            <el-button  class="" @click="toRoomStandard">房间标准</el-button>
            <el-button  class="" @click="toRoomType">房间类型</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-row>
        <el-col :span="7">
          <buildStructure class="buildingEdit-container"
                :treeData="treeData"
                @addFloor="addFloor"
                @removeFloor="removeFloor"
                @addBuilding="addBuilding"
                @removeBuilding="removeBuilding"
                @changeFloor="changeFloor"
                @save="structureSave"
          />
          <!--<p>treeData: {{ treeData }}</p>-->
          <!--<p>selectedFloorId: {{ selectedFloorId }}</p>-->
          <!--<p>buildingIdOfSelectedFloorId: {{ buildingIdOfSelectedFloorId }}</p>-->
        </el-col>
        <el-col :span="17">
          <roomArrangement class="roomEdit"
                 v-if="selectedFloorId"
                 :flId="selectedFloorId"
                 :title="selectedBuildingFloorName"
                 @updateFloor="updateFloor"
          />
        </el-col>
      </el-row>
    </div>
  </page-frame>
</template>

<script type="text/ecmascript-6">
  import roomArrangement from '../../components/room/roomArrangement.vue'
  import buildStructure from '../../components/room/buildingStructure.vue'
  import roomApi from '../../service/corporation/roomApi'
  export default {
    data() {
      return {
        treeData: [],
        selectedFloorId: "",
      }
    },
    computed: {
      selectedBuildingFloorName() {
        let name = "";
        if(this.selectedFloorId) {
          for(var i=0; i<this.treeData.length; i++) {
            let building = this.treeData[i]
            if(building.children) {
              for(var j=0; j<building.children.length; j++) {
                let floor = building.children[j];
                if(floor.flId === this.selectedFloorId) {
                  name = building.blName + floor.flName;
                }
              }
            }
          }
        }
        return name;
      },
      buildingIdOfSelectedFloorId() {
        let buildingId = "";
        if(this.selectedFloorId) {
          for(var i=0; i<this.treeData.length; i++) {
            let building = this.treeData[i]
            if(building.children) {
              for(var j=0; j<building.children.length; j++) {
                let floor = building.children[j];
                if(floor.flId === this.selectedFloorId) {
                  buildingId = building.blId;
                }
              }
            }
          }
        }
        return buildingId;
      }
    },
    methods: {
      init() {
        this.getData();
      },
      getData() {
        roomApi.getStructure().then(res => {
          this.treeData = res.body.data;
        }, res => {})
      },
      addBuilding() {
        let message = "请输入建筑名称";
        let title = "添加建筑";
        this.$prompt(message, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\S]+/,
          inputErrorMessage: '请输入建筑名称',
        }).then(({ value }) => {
          this.treeData.push({
            blName: value,
            children: [],
          });
        }).catch(() => {});
      },
      removeBuilding(buildingIndex) {
        let currentBuilding = this.treeData[buildingIndex];
        let removeLocalData = () => {
          this.treeData.splice(buildingIndex, 1);
        }
        if(currentBuilding.children.length>0 || currentBuilding.blId) {  // 当前建筑有id或者有楼层子节点时需要提交删除，否则直接删除本地数据
          let message = '删除操作不可撤销，确认删除建筑？';
          let title = "删除" + currentBuilding.blName;
          this.$confirm(message, title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(currentBuilding.blId) { // 当前建筑有id时在成功提交删除后删除本地数据
              roomApi.removeBuilding(currentBuilding.blId).then(res => {
                if(currentBuilding.blId === this.buildingIdOfSelectedFloorId) {
                  this.selectedFloorId = null;
                }
                removeLocalData();
              }, res => {});
            } else {
              removeLocalData();
            }
          }).catch(() => {});
        } else {
          removeLocalData();
        }
      },
      addFloor(buildingIndex) {
        let currentBuilding = this.treeData[buildingIndex];
        let message = "请输入楼层号";
        let title = currentBuilding.blName;
        this.$prompt(message, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\d]+/,
          inputErrorMessage: '请输入数字',
        }).then(({ value }) => {
          currentBuilding.children.push({
            flName: value + "楼",
            children: [],
          });
        }).catch(() => {});
      },
      removeFloor(buildingIndex, floorIndex) {
        let currentBuilding = this.treeData[buildingIndex];
        let currentFloor = currentBuilding.children[floorIndex];
        let removeLocalData = () => {
          currentBuilding.children.splice(floorIndex, 1);
        }
        if(currentFloor.children.length>0 || currentFloor.flId) {  // 当前楼层有id或者有房间子节点时需要提交删除，否则直接删除本地数据
          let message = '删除操作不可撤销，确认删除楼层？';
          let title = "删除" + currentBuilding.blName + "-" + currentFloor.flName;
          this.$confirm(message, title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(currentFloor.flId) { // 当前楼层有id时在成功提交删除后删除本地数据
              roomApi.removeFloor(currentFloor.flId).then(res => {
                if(currentFloor.flId === this.selectedFloorId) {
                  this.selectedFloorId = null;
                }
                removeLocalData();
              }, res => {});
            } else {
              removeLocalData();
            }
          }).catch(() => {});
        } else {
          removeLocalData();
        }
      },
      updateFloor(flId) {
        roomApi.getRoomTreeByFlId(flId).then(res => {
          for(var i=0; i<this.treeData.length; i++) {
            let building = this.treeData[i];
            for(var j=0; j<building.children.length; j++) {
              let floor = building.children[j];
              if(floor.flId === flId) {
                floor.children = res.body.data;
              }
            }
          }
        }, res => {});
      },
      changeFloor(flId) {
        if(this.selectedFloorId !== flId) {
          this.selectedFloorId = flId;
        }
      },
      structureSave() {
        roomApi.saveStructure(this.treeData).then(res => {
          console.log(res.body.data);
          this.treeData = res.body.data;
        }, res => {})
      },
      toRoomType() {
        this.$router.push({name: "roomType"});
      },
      toRoomStandard(){
        this.$router.push({name: "roomStandard"});
      },
    },
    components: {roomArrangement, buildStructure},
    mounted() {
      this.init();
    }
  }
</script>

<style>
  .buildingEdit {

  }
  .roomEdit {
    padding: 20px;
    background-color: #F5FBFF;
  }
</style>
